<template>
<div class="firstBanner">
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="pink">
    <van-swipe-item><img src="@/assets/banner1.jpg" alt=""></van-swipe-item>
    <van-swipe-item><img src="@/assets/banner2.jpg" alt=""></van-swipe-item>
    <van-swipe-item><img src="@/assets/banner3.jpg" alt=""></van-swipe-item>
    <van-swipe-item><img src="@/assets/banner4.jpg" alt=""></van-swipe-item>

  </van-swipe>
</div>
</template>

<script>
export default {
  name: "FirstBanner",
  data() {
    return {
      images: [
        '@/assets/banner1.jpg',
        '@/assets/banner2.jpg',
        '@/assets/banner3.jpg',
        '@/assets/banner4.jpg',

      ],
    };
  },
}
</script>

<style  scoped lang="scss">
.my-swipe .van-swipe-item {
  height: 200px;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  //background-size: cover;
}
.my-swipe img{
  height:  100%;
  width: 100%;
  background-size: cover;

}
</style>